<template>
  <view class="create-bg">
    <!-- 甲乙方tab和信息卡片 -->
    <view class="main-card">
      <view class="tab-bar">
        <view :class="['tab-item', isPartyA ? 'active' : '']" @click="isPartyA = true">我是甲方</view>
        <view :class="['tab-item', !isPartyA ? 'active' : '']" @click="isPartyA = false">我是乙方</view>
      </view>
      <view class="row-between initiator-row">
        <text class="initiator-label">发起方</text>
        <text class="initiator-company">某公司</text>
      </view>
      <!-- 甲方卡片 -->
      <view class="party-card party-a">
        <view class="party-tag party-a-tag">甲方</view>
        <view class="party-info">
          <template v-if="isPartyA">
            姓名 | 13333333333
          </template>
          <template v-else>
            签署方信息由对方填写
          </template>
        </view>
      </view>
      <!-- 乙方卡片 -->
      <view class="party-card party-b">
        <view class="party-tag party-b-tag">乙方</view>
        <view class="party-info">
          <template v-if="!isPartyA">
            姓名 | 13333333333
          </template>
          <template v-else>
            签署方信息由对方填写
          </template>
        </view>
      </view>
    </view>

    <!-- 合同信息列表 -->
    <view class="info-list">
      <view class="info-item" v-for="field in contractFields" :key="field">
        <text class="info-label">{{ field }}</text>
        <input class="info-input" v-model="contractInfo[field]" :placeholder="`请输入${field}`" />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="next-btn" @click="goNext">下一步</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 假设合同模板字段列表（可从接口获取或配置）
const contractFields = ref(['甲方（客户）', '签约日期', '合同编号'])
const contractInfo = ref({})
const isPartyA = ref(true)

function goNext() {
  // contractInfo.value 结构如 { '甲方（客户）': 'xxx', '签约日期': 'yyy' }
  uni.navigateTo({
    url: '/pages/confirm/index'
  })
}
</script>

<style lang="scss" scoped>
.create-bg {
  background: #f4f4f4;
  min-height: 100vh;
  padding: 0 0 120rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-card {
  background: #fff;
  border-radius: 20rpx;
  margin-top: 40rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06);
  padding: 0 0 24rpx 0;
  width: 92vw;
  max-width: 700rpx;
}
.tab-bar {
  display: flex;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  background: #fff;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 28rpx 0 18rpx 0;
    font-size: 32rpx;
    color: #888;
    font-weight: bold;
    background: #fff;
    transition: color 0.2s;
  }
  .tab-item.active {
    color: #f55a4e;
    border-bottom: 4rpx solid #f55a4e;
    background: #fff;
  }
}
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 24rpx 0 24rpx;
  font-size: 30rpx;
  padding-top: 18rpx;
}
.initiator-label {
  color: #222;
}
.initiator-company {
  color: #888;
}
.party-card {
  margin: 16rpx 24rpx 0 24rpx;
  border-radius: 12rpx;
  padding: 18rpx 24rpx;
  display: flex;
  align-items: center;
  background: #f9eaea;
}
.party-a {
  background: #f9eaea;
}
.party-b {
  background: #e6f7f5;
  margin-top: 12rpx;
}
.party-tag {
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 8rpx;
  padding: 6rpx 18rpx;
  margin-right: 18rpx;
  color: #fff;
}
.party-a-tag {
  background: #f55a4e;
}
.party-b-tag {
  background: #00bfa5;
}
.party-info {
  font-size: 28rpx;
  color: #222;
}
.info-list {
  margin: 0 0 0 0;
  background: #fff;
  border-radius: 16rpx;
  padding: 8rpx 0;
  width: 92vw;
  max-width: 700rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.04);
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22rpx 24rpx;
  font-size: 30rpx;
  border-bottom: 2rpx solid #f4f4f4;
}
.info-item:last-child {
  border-bottom: none;
}
.info-label {
  color: #888;
  min-width: 140rpx;
}
.info-value {
  color: #222;
  font-weight: bold;
}
.info-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 30rpx;
  color: #222;
  text-align: right;
}
.footer {
  margin-top: 48rpx;
  display: flex;
  justify-content: center;
  .next-btn {
    width: 90vw;
    max-width: 700rpx;
    height: 88rpx;
    background: #f55a4e;
    color: #fff;
    font-size: 32rpx;
    border-radius: 16rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 16rpx rgba(245,90,78,0.12);
  }
}
</style> 